<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell>
        <span slot="title" class="text">我的频道</span>
        <van-button round
         size="mini"
         type="danger"
         plain
         class="edit-btn"
         @click="isEndit= !isEndit">{{isEndit? '完成':'编辑'}}</van-button>
    </van-cell>
    <!-- 宫格 -->
    <van-grid :gutter="10" class="grid-up">
        <van-grid-item class="grid-item" v-for="(value,index) in myChannels" :key="index"
        @click="onMyChannel(value,index)">
            <van-icon slot="icon" name="clear" v-show="isEndit &&value.id!=0 "></van-icon>
            <!-- 动态添加class(文字颜色) -->
            <span slot="text" :class="{text:index==active}" class="van-grid-item__text">{{value.name}}</span>
        </van-grid-item>
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell>
        <span slot="title"  class="title-text">频道推荐</span>
    </van-cell>
    <!-- 宫格 -->
    <van-grid :gutter="10" class="grid-down">
        <van-grid-item class="grid-item" icon="plus" v-for="value in recomendChannels" :key="value.id" :text="value.name" @click="addChannel(value)" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channe'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  created () {
    this.getAllChannels()
  },
  data () {
    return {
      AllChannels: [],
      isEndit: false
    }
  },
  methods: {
    async getAllChannels () {
      try {
        const { data } = await getAllChannels()
        this.AllChannels = data.data.channels
        console.log(this.AllChannels)
      } catch (err) {
        console.log('获取全部频道列表失败', err)
      }
    },
    // 添加我的频道列表
    async addChannel (value) {
      console.log(value)
      // 根据索引删除我的频道列表项
      // eslint-disable-next-line vue/no-mutating-props
      this.myChannels.push(value)
      // 数据持久化
      // vuex里的user可以判断是否登录
      if (this.user) {
        // 如果已登录
        try {
          const { data } = await addUserChannel({
            id: value.id,
            seq: this.myChannels.length
          })
          console.log(data)
        } catch (err) {

        }
      } else {
        // 未登录，本地存储
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    // 1.登陆账号
    // 跟账号相关联 -> 数据信息 ->后台服务器
    // 2.未登录
    // 跟本地相关联 -> 数据信息 -> 本地缓存
    },
    // 删除我的频道列表
    onMyChannel (channel, index) {
      // 编辑状体
      if (this.isEndit) {
        if (index === 0) {
          return false
        }
        if (index < this.active) {
          console.log(this.active - 1)
          this.$emit('updataActive', this.active - 1, true)
        }
        // 如果删除的是当前显示频道之前，则让active-1
        // true表示弹层打开
        // eslint-disable-next-line vue/no-mutating-props
        this.myChannels.splice(index, 1)
        this.deleteChannel(channel.id)
      } else {
        // 非编辑状体
        this.$emit('updataActive', index, false)
      }
    },
    // 删减频道列表请求
    async deleteChannel (channelId) {
      if (this.user) {
        try {
          const res = await deleteUserChannel(channelId)
          console.log('删除频道成功', res)
        } catch (err) {
          console.log('删除频道失败', err)
        }
      } else {
        // console.log(this.active)
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    }
  },
  computed: {
    // 计算推荐频道列表
    recomendChannels () {
      // return this.AllChannels.filter(channel => {
      //   // find遍历数组，返回满足第一个条件的元素
      //   return !this.myChannels.some(mychannel => {
      //     return mychannel.id === channel.id
      //   })
      // })

      return this.AllChannels.filter(channel => {
        return !this.myChannels.some(item => {
          return item.id === channel.id
        })
      })
    },
    // 也可以使用forEach AllChannels, find myChannels 里item.id!=additem.id push进返回值数组

    ...mapState(['user'])
  },
  name: 'channel-edit'
}
</script>

<style scoped lang="less">
    .channel-edit{
        padding: 1.0625rem 0;
    }
    .title-text{
        font-size: .4rem;
        color: #333;
    }
    .edit-btn{
        width: 1.3rem;
        height: .6rem;
        font-size: .325rem;
        color:#f85959;
        border: .0125rem solid #f85959;
    }
    .grid-item{
        width: 2rem;
        height: 1.075rem;
    }

     /deep/.van-grid-item__content{
        background-color: #f4f5f6;
         .van-grid-item__text {
            color: #646566;
            font-size: 25.6px;
            margin: 0;
      }
    }
    /deep/.grid-up{
        .text{
            color:red;
        }
        .van-icon-clear {
            position: absolute;
            top: -0.125rem;
            right: -0.125rem;
            color: #cacaca;
            font-size: .45rem;
            z-index: 2;
        }
    }
    /deep/.grid-down{
        .van-grid-item__content{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            align-items: center;
            color:#222;
        }
        .van-icon-plus {
             font-size: .3rem;
        }

    }
 /deep/.van-grid-item__icon-wrapper{
      position: unset;
    }
</style>
